<template>
    <div>

      <!-- 面包屑导航条 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据中心</el-breadcrumb-item>
        <el-breadcrumb-item>添加原材料</el-breadcrumb-item>
      </el-breadcrumb>



      <el-card class="box-card">



      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="编号" prop="code">
              <el-input v-model="ruleForm.code" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
            <el-col :span="12">
              <el-form-item label="原材料名称" prop="name">
                <el-input type="text" v-model="ruleForm.name" style="width: 200px"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="化元素叫法学" prop="chemical" label-width="110px">
                <el-input type="text" v-model="ruleForm.chemical" style="width: 200px"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密度" prop="density">
              <el-input type="text" v-model="ruleForm.density" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
          </el-row>
        <el-row>
            <el-col :span="12">
              <el-form-item label="硬度" prop="hardness">
                <el-input type="text" v-model="ruleForm.hardness" style="width: 200px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="材料介绍" prop="remarks">
                <el-input type="text" v-model="ruleForm.remarks" style="width: 200px"></el-input>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单价" prop="price">
              <el-input type="text" v-model.number="ruleForm.price" style="width: 200px"></el-input>
            </el-form-item>
          </el-col>
            <el-col :span="12">
              <el-form-item>
                <el-button type="primary" @click="addSave()">保存</el-button>
                <el-button type="primary" @click="logout()">返回</el-button>
              </el-form-item>
          </el-col>
        </el-row>
        </el-form>

      </el-card>

    </div>
</template>

<script>
  export default {
    name: 'AddMaterial',
    data(){
      return{
        ruleForm:{
          code:'',
          name:'',
          chemical:'',
          density:'',
          hardness:'',
          remarks:'',
          price:''

        },
        rules:{
          code:[
              {rangelength: [6,6], message: '长度为6位', trigger: 'blur'},
              {required: true, message: '请输入编号', trigger: 'blur'}

          ],
          name:[
            {required: true, message: '请输入名称', trigger: 'blur'}
            ],
          chemical:[
            {required: true, message: '请输入化学元素叫法', trigger: 'blur'}
            ],
          density:[
            {number: true, message: '请输入数字', trigger: 'blur'},
            {required: true, message: '请输入密度', trigger: 'blur'}

          ],
          hardness:[
            {number: true, message: '请输入数字', trigger: 'blur'},
            {required: true, message: '请输入硬度', trigger: 'blur'}
          ],
          remarks:[
            {required: true, message: '请输入材料介绍', trigger: 'blur'}
            ],
          price:[
              {pattern: /\d/, message: '请输入数字', trigger: 'blur'},
              {required: true, message: '请输入单价', trigger: 'blur'}
          ],
        }
      }
    },
    methods:{
      //添加原材料
      addSave:function () {
        this.$refs['ruleForm'].validate((valid)=>{
          if(valid){
            this.$http.post("/material/save",this.ruleForm).then((res)=>{
              if(res.data.success){
                alert(res.data.message);
              }else{
                alert(res.data.message);
              }
            });
          }
        });

      },
      logout:function () {
        this.$router.push({ path: "/material" });
      }
    }
  }
</script>

<style scoped>

</style>
